<template>
	<l-dialog v-model="show" on-button-width="236px" close-button-width="236px" title="选择商品" width="1042px" @close="handleClose" @formClose="handleClose" @formSubmit="handleSubmit">
		<el-form ref="goodsForm" :model="goodsForm" inline label-width="100px">
			<el-form-item label="商品ID:" prop="id">
				<el-input v-model.trim="goodsForm.id" maxlength="6" show-word-limit class="!w-[240px] !max-w-[240px]" placeholder="请输入商品ID"></el-input>
			</el-form-item>
			<el-form-item label="商品名称:" prop="name">
				<el-input v-model.trim="goodsForm.name" maxlength="30" show-word-limit class="!w-[240px] !max-w-[240px]" placeholder="请选择商品名称"></el-input>
			</el-form-item>
			<el-form-item label="供应商名称:" prop="userName">
				<el-input v-model.trim="goodsForm.userName" maxlength="10" show-word-limit class="!w-[240px] !max-w-[240px]" placeholder="请选择供应商名称"></el-input>
			</el-form-item>
			<el-form-item label="商品价格:">
				<div class="flex items-center">
					<el-form-item prop="min">
						<el-input v-model="goodsForm.min" class="!w-[109px] !max-w-[109px]" placeholder="最低价"></el-input>
					</el-form-item>
					<span class="mr-[9px]">-</span>
					<el-form-item prop="max">
						<el-input v-model="goodsForm.max" class="!w-[109px] !max-w-[109px]" placeholder="最高价"></el-input>
					</el-form-item>
					<span class="text-[12px]">元</span>
				</div>
			</el-form-item>
			<el-form-item label="商品分类:" prop="cate">
				<el-cascader v-model="goodsForm.cate" class="el-input-240" :props="props" clearable expand-trigger="hover" placeholder="请选择分类" @change="handleCategoryChange" />
			</el-form-item>
			<el-form-item>
				<div class="page-modal-search">
					<el-button icon="el-icon-search" type="primary" @click="queryGoodsList">搜索 </el-button>
					<el-button icon="el-icon-refresh" @click="resetGoodsQuery">重置</el-button>
				</div>
			</el-form-item>
		</el-form>
		<div class="flex items-center text-[12px] mb-[10px]">
			已选择<span class="text-[#F14A46]">（{{ selectList.length }}）</span>个商品
		</div>
		<el-table ref="multipleTable" v-loading="goodsLoading" :data="goodsList" row-key="id" stripe @sort-change="handleGoodsSortChange" @selection-change="selectGoodsChange">
			<el-table-column :formatter="emptyToString" :reserve-selection="true" align="center" type="selection" width="55"> </el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="序号" type="index" width="55"> </el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="商品ID" prop="id" min-width="120"></el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="商品名称" prop="name" min-width="120" show-overflow-tooltip>
				<template slot-scope="scope">
					<span style="color: var(--primary-color)">{{ scope.row.name }}</span>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="商品图片" prop="picUrl" min-width="120">
				<template slot-scope="scope">
					<el-image :src="scope.row.picUrl" style="width: 45px; height: 45px" :preview-src-list="[scope.row.picUrl]" :z-index="9999"></el-image>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="商品分类" prop="oneLevel" min-width="120">
				<template slot-scope="scope">
					<div class="flex items-center">
						<span>{{ scope.row.oneLevel }}</span>
						<span> > </span>
						<span>{{ scope.row.twoLevel }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" prop="userName" label="供应商名称" align="center" min-width="120"></el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="商品价格（元）" sortable prop="retailPrice" min-width="156"></el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="供应价格（元）" sortable prop="supplyPrice" min-width="156"></el-table-column>
		</el-table>
		<pagination class="!mb-[26px] !mt-[32px]" :limit.sync="goodsForm.pageSize" :page.sync="goodsForm.pageNum" :total="goodsTotal" @pagination="getGoodsList" />
	</l-dialog>
</template>

<script>
import { listChild, listParent } from '@/api/mall/category';
import snakeCase from 'lodash/snakeCase';
import { listGoods } from '@/api/mall/goods';

export default {
	name: 'Index',
	data() {
		return {
			show: false,
			goodsForm: {
				id: null,
				name: null,
				userName: null,
				min: null,
				max: null,
				cate: null,
				pageSize: 10,
				pageNum: 1,
				category: null,
			},
			goodsLoading: false,
			goodsList: [],
			goodsTotal: 0,
			props: {
				lazy: true,
				lazyLoad(node, resolve) {
					const { level, value } = node;
					if (level === 0) {
						listParent().then((response) => {
							const { data } = response;
							const nodes = data.map((item) => ({
								value: item.id,
								label: item.name,
								leaf: false,
							}));
							resolve(nodes);
						});
					} else {
						listChild(value).then((response) => {
							const { data } = response;
							const nodes = data.map((item) => ({
								value: item.id,
								label: item.name,
								leaf: true,
							}));
							resolve(nodes);
						});
					}
				},
			},
			selectList: [],
		};
	},
	methods: {
		open() {
			this.show = true;
			this.selectList = [];
			this.getGoodsList();
		},
		getGoodsList() {
			this.goodsLoading = true;
			listGoods(this.goodsForm)
				.then((response) => {
					this.goodsList = response.data.records;
					this.goodsTotal = response.data.total;
				})
				.finally(() => {
					this.goodsLoading = false;
				});
		},
		handleGoodsSortChange(sort) {
			this.goodsForm.sortStr = snakeCase(sort.prop);
			this.goodsForm.sortDesc = sort.order;
			this.getGoodsList();
		},
		resetGoodsQuery() {
			this.$refs.goodsForm.resetFields();
			this.queryGoodsList();
		},
		queryGoodsList() {
			this.goodsForm.pageNum = 1;
			this.getGoodsList();
		},
		selectGoodsChange(value) {
			this.selectList = value;
		},
		handleCategoryChange(value) {
			this.goodsForm.category = value[value.length - 1];
		},
		handleSubmit() {
			if (this.selectList.length < 1) {
				this.$message.error('请选择商品');
				return false;
			}
			this.$emit('selectList', this.selectList);
			this.handleClose();
		},
		handleClose() {
			this.$refs.goodsForm.resetFields();
			if (this.$refs.multipleTable) {
				this.$refs.multipleTable.clearSelection();
			}
			this.selectList = [];
			this.getGoodsList();
			this.show = false;
		},
	},
};
</script>

<style scoped></style>
